<template>
  <div
    v-empty="!productReadAuth"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
    class="detail-tab">
    <template v-if="showTable && productReadAuth">
      <tab-table
        :request-config="tabTableRequest"
        class="table-list"
        @render-ok="handleRenderOk"
        @row-click="handleTableRowClick" />

      <div class="total">
        已选产品:
        <span class="total-num">{{ totalCount }}</span>
        总金额：{{ detailData.totalPrice | separator }}元
      </div>
    </template>

    <j-x-c-full-screen-detail
      v-if="showDetail && rowId && detailType"
      :id="rowId"
      :type="detailType"
      @update="handleRefresh"
      @close="showDetail = false" />
  </div>
</template>

<script>
import { jxcPurchaseQueryChasProductListAPI } from '@/api/jxc/purchase'
import TabTable from '../../../components/DetailTab/TabTable'
import { accAdd } from '@/utils/acc'
import { separator } from '@/filters/vueNumeralFilter/filters'
import { mapGetters } from 'vuex'

// 产品
export default {
  name: 'TabProductList',
  filters: {
    separator(val) {
      return separator(val || 0)
    }
  },
  components: {
    TabTable,
    JXCFullScreenDetail: () => import('../../../components/JXCFullScreenDetail')
  },
  inheritAttrs: false,
  props: {
    batchId: {
      type: [String, Number],
      required: true
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    const fieldList = [
      { fieldName: 'productName', name: '产品名称' },
      { fieldName: 'spDataValue', name: '产品规格' },
      { fieldName: 'productCompany', name: '单位' },
      { fieldName: 'purchasesNumber', name: '采购数' },
      { fieldName: 'purchasesPrice', name: '采购单价' },
      { fieldName: 'purchasesSubtotal', name: '合计' }
    ]
    return {
      tabTableRequest: {
        fieldList: fieldList,
        listParams: {},
        listRequest: jxcPurchaseQueryChasProductListAPI,
        canVisitField: ['productName']
      },
      showTable: false,

      totalCount: 0,
      totalPrice: 0,

      rowId: null,
      detailType: null,
      showDetail: false
    }
  },
  computed: {
    ...mapGetters(['jxc']),
    productReadAuth() {
      return this.jxc && this.jxc.product && this.jxc.product.read
    }
  },
  watch: {
    batchId: {
      handler(val) {
        if (val) {
          this.showTable = false
          this.tabTableRequest.listParams = {
            batchId: val
          }
          this.$nextTick(() => {
            this.showTable = true
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    handleRenderOk(data) {
      this.totalCount = data.data.length
      let res = 0
      data.data.forEach(o => {
        res = accAdd(o.purchasesSubtotal, res)
      })
      this.totalPrice = res
    },

    /**
     * 刷新
     */
    handleRefresh() {
      this.showTable = false
      this.$nextTick(() => {
        this.showTable = true
      })
    },

    handleTableRowClick(row, field) {
      if (field === 'productName') {
        this.rowId = row.productId
        this.detailType = 'jxc_product'
        this.showDetail = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../styles/detailTab";

.total {
  width: 100%;
  font-size: 12px;
  text-align: right;
  padding: 0 15px;
  margin-top: 5px;
  .total-num {
    color: #fd715a;
    margin-right: 15px;
  }
}
</style>
